<template>
    <div class="user-detail">
        <h1>我的收藏</h1>
        <div class="detail_content">
            <div v-for="(shop,index) in favoriteShops" :key="index" >
                <img :src="shop.img" @click="toGood">
                <div class="nei">
                    <ul>
                        <li><h3 @click="toGood">{{shop.content}}</h3></li>
                        <li><p>{{shop.price}}</p></li>
                        <li><div style="display: inline-block;padding-top: 70px"></div></li>
                    </ul>
                </div>
                <el-button class="del" type="danger" icon="el-icon-delete-solid" circle @click="deleteClick(index)"></el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "UserFavorite",
        data(){
            return{
                favoriteShops:[
                    {
                        img:"https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/193933/22/14075/70885/60f79287E7041506c/f5acc049805c7457.jpg.webp",
                        content:"联想ThinkBook 14 锐龙版 14英寸超轻薄笔记本100%sRGB色域 丰富接口 R5-5500U 16G 512G 预装office",
                        price:'￥200',
                    },
                    {
                        img:"https://img13.360buyimg.com/seckillcms/s500x500_jfs/t1/186680/8/14381/124826/60f8de23E28860cff/d4ad37fab42c225e.jpg",
                        content:"AGATHA瑷嘉莎 925银手链女士经典镂空小狗情侣手链时尚饰品七夕情人节礼物 经典镂空小狗(242039C-313-TU) ",
                        price:'￥200'
                    },
                    {
                        img:"https://img11.360buyimg.com/seckillcms/s500x500_jfs/t1/191857/18/14307/131263/60f8e358Ee41f14e8/ab16bbbfce6f7c28.jpg",
                        content:"卡吉士黄油面包夹心手撕面包400g*2箱糕点心休闲零食 ",
                        price:'￥200'
                    },
                ]
            }
        },
        methods:{
            deleteClick(index){
                this.favoriteShops.splice(index,1)
                //暂时还没连接到后端提交到数据库
                alert("取消收藏成功")
            },
            toGood(){
                console.log("前往商品")
                this.$router.push('detail')
            }
        }
    }
</script>

<style scoped>
    .user-detail {
        width: 70%;
        height: 100%;
        margin: 20px auto;
        border: none;
    }
    .user-detail h1{
        font-size: 30px;
        text-align: center;
    }
    .user-detail .detail_content{
        margin-top: 20px;
        position: relative;
    }
    .user-detail .detail_content img{
        width: 200px;
        height: 200px;
    }
    .user-detail .detail_content .nei{
        display: inline-block;
        width: 750px;
    }
    .user-detail .detail_content .nei li{
        list-style: none;
    }
    .user-detail .detail_content .nei li p{
        padding-top: 50px;
        font-size: 20px;
        color: skyblue;
    }
    .user-detail .detail_content .del{
        float: right;
        width: 50px;
        height:50px
    }
</style>